<template>
	<div>
		<div class="student">
			<el-row>
				<el-col :span="5">
					<el-input v-model="search.name" placeholder="请输入要查询的学生名"></el-input>
				</el-col>
				<el-col :span="19">
					<el-button type="primary" icon="el-icon-search" plain @click="searchData()">搜索</el-button>
					<el-button type="primary" icon="el-icon-circle-plus-outline" plain @click="add()">批量添加</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-table :data="this.result.tableData" style="width: 100%">
					<el-table-column prop="id" label="ID" width="180">
					</el-table-column>
					<el-table-column prop="name" label="姓名" width="120">
					</el-table-column>
					<el-table-column prop="age" label="年龄" width="120">
					</el-table-column>
					<el-table-column prop="className" label="所属班级" width="100">
					</el-table-column>
					<el-table-column label="是否有未完成作业">
						<template slot-scope="scope">
							<span v-if="scope.row.isNote=='0'"><span style="color: #00AAFF;">已完成作业</span></span>
							<span v-else><span style="color: #AF5B5E;">未完成作业</span></span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button v-if="scope.row.isNote=='1'" type="primary" icon="el-icon-s-promotion">提醒完成任务</el-button>
							<el-button type="danger" icon="el-icon-delete">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
		</div>
	</div>
</template>

<script>
	import axios from "../../../utils/axiosutils.js"
	export default {
		name: 'studentManage',
		data() {
			return {
				title: '',
				result: {
					tableData: [],
					pages: 0
				},
				query: {
					name: '',
					pageNo: 1,
					pageSize: 8
				},
				search: {
					name: ''
				}
			};
		},
		created() {
			this.getData();
		},
		methods: {
			getData() {
				axios.get(
					'/student/list',
					resp => {
						console.log(resp);
						this.result.tableData = resp.obj.records;
						this.result.pages = resp.obj.pages;
					},
					this.query
				);
			},
			searchData() {
				this.query.name = this.search.name;
				this.query.pageNo = 1;
				this.getData();
			}
		}
	};
</script>
<style scoped>

</style>
